<template>
	<div class="data-analysis">
		
		<el-tabs class="data-analysis-tabs" v-model="activeTab">
			<el-tab-pane class="overview" label="收益概况" name="overview">
				
				<!-- 日期选择 -->
				<div class="search-toolbar">

					<el-radio-group v-model="dateRadio" size="mini" @change="dateSelectChange">
						<el-radio-button :label="7">7天</el-radio-button>
						<el-radio-button :label="14">14天</el-radio-button>
						<el-radio-button :label="30">30天</el-radio-button>
					</el-radio-group>

					<el-date-picker
						v-model="searchDate"
						class="analysis-date-picker"
						size="mini"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始时间"
						end-placeholder="结束日期"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
					></el-date-picker>
				</div>

				<!-- 概况 -->
				<div class="analysis-brief">
					
					<div class="brief-item">
						<span class="title">广告收益（昨日）</span>
						<span class="num">{{brief.yesterdayAd}}</span>
						<span class="subs">订阅收益：{{brief.yesterdayPay}}</span>
						<span class="label">本月：{{brief.month}}</span>
					</div>

				</div>



				<!-- 详情表格 -->
				<div class="data-detail-table-wrap">
					<div class="block-title">日报表</div>
					<el-table 
						size="mini" 
						:data="detailTable" 
						stripe
						:header-cell-style="tableHeaderSty"
						:cell-style="tableCellSty"
						style="width:100%">
						
						<el-table-column
							prop="statDate"
							label="日期"
						></el-table-column>

						<el-table-column
							prop="totalAmount"
							label="总数"
						></el-table-column>

						<el-table-column
							prop="adAmount"
							label="平台广告"
						></el-table-column>

						<el-table-column
							prop="payAmount"
							label="付费阅读"
						></el-table-column>

						<el-table-column
							prop="originalAmount"
							label="原创销售"
						></el-table-column>

					</el-table>
				</div>


			</el-tab-pane>
			<el-tab-pane label="收益设置" name="setting">
				


			</el-tab-pane>
		</el-tabs>

	</div>
</template>


<script>
import { getGeneral, getDetailTable } from "@/api/incomeAnalysis";
import { validatenull } from "@/utils/validate"
import echarts from 'echarts';

export default{

	data(){
		return{
			activeTab:"overview",
			dateRadio:7,			//概况
			searchDate:"",			//概况
			brief:{
				yesterdayAd:0,		//昨日广告收益
				yesterdayPay:0,		//昨日订阅收益
				month:0,			//本月广告收益
			},
			//概况表格数据
			detailTable:[
				{
		            "adAmount": 0,  //平台广告
		            "originalAmount": 0,//原创销售
		            "payAmount": 0,//付费阅读
		            "statDate": "2019-10-18",
		            "totalAmount": 0//总数
		        },
		        {
		            "adAmount": 0,
		            "originalAmount": 15,
		            "payAmount": 0,
		            "statDate": "2019-10-19",
		            "totalAmount": 15
		        },
		        {
		            "adAmount": 0,
		            "originalAmount": 15,
		            "payAmount": 10,
		            "statDate": "2019-10-20",
		            "totalAmount": 25
		        },
		        {
		            "adAmount": 0,
		            "originalAmount": 0,
		            "payAmount": 8,
		            "statDate": "2019-10-22",
		            "totalAmount": 8
		        },
		        {
		            "adAmount": 0.9,
		            "originalAmount": 15,
		            "payAmount": 18,
		            "statDate": "2019-10-23",
		            "totalAmount": 33.9
		        },
		        {
		            "adAmount": 0,
		            "originalAmount": 45,
		            "payAmount": 42,
		            "statDate": "2019-10-24",
		            "totalAmount": 87
		        }
			],
			tableHeaderSty:{
				"backgroundColor":"#f4f5f6",
				"padding":"15px 0",
			},
			tableCellSty:{
				"padding":"15px 0",
			}
		}
	},
	mounted(){
		var _this = this;
		//初始化数据请求日期，并请求数据
		this.init(function(){

			//总览数据
			_this.getGeneralData();

			
			//请求表格数据
			_this.getDetailTable();
		})

		
	},
	methods:{
		//初始化数据请求日期，并请求数据
		init(callback){
			this.searchDate = [this.getDateBefore(),this.getDateBefore(7)];

			if(callback){
				callback()
			}
		},
		//请求概况数据
		getGeneralData(){
			getGeneral(this.searchDate[0],this.searchDate[1]).then((res)=>{
				console.log("--------请求概况初始数据----------")
				console.log(res)
				var result = res.data.data;
				if(!validatenull(result)){
					this.brief = result;
				}
				
			})
		},
		//请求表格数据
		getDetailTable(){
			getDetailTable(this.searchDate[0],this.searchDate[1]).then((res)=>{
				console.log("------广告收益返回信息-------")
				console.log(res)
				this.detailTable = res.data.data;
				
			})
		},
		//概况选择日期
		dateSelectChange(value){
			this.searchDate = [this.getDateBefore(),this.getDateBefore(value)]

		},

		//获取几天前的日期
		getDateBefore(num){
			num = (num === undefined ? 1 : num);
			var date = new Date();
			var date_str = date.getTime();
			var result_str = date_str - num*24*60*60*1000;
			var result = new Date(result_str);

			var yyyy = result.getFullYear();
			var MM = (result.getMonth()+1) > 9 ? (result.getMonth()+1) : "0"+(result.getMonth()+1);
			var dd = result.getDate() > 9 ? result.getDate() : "0"+result.getDate();
			return yyyy+"-"+MM+"-"+dd;
		}

	}
}	

</script>


<style>
	.data-analysis-tabs .el-tabs__item.is-active,.data-analysis-tabs .el-tabs__item:hover{
		color: #ff8100;
	}

	.data-analysis-tabs .el-tabs__active-bar{
		background-color: #ff8100;
	}



</style>

<style scoped>
	.data-analysis,.overview{
		padding: 15px;
	}

	.analysis-date-picker{
		height: 30px;
		margin-left: 10px;
	}

	.analysis-brief{
		display: flex;
		width:100%;
		margin:30px 0 50px 0;
		flex-direction: row;
		justify-content: space-between;
	}

	.analysis-brief .brief-item{
		flex:1;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		background-color: #f8f8f8;
		padding: 30px 20px;
		color: #333;
	}

	.analysis-brief .brief-item .title{
		color: #363636;
		font-size: 14px;
		font-weight: 700;
	}

	.analysis-brief .brief-item .num{
		font-size: 20px;
		color: #868686;
		font-weight: 400;
		margin: 20px 0;
	}

	.analysis-brief .brief-item .subs{
		color: #FF8406;
		margin-bottom: 10px;
		font-size: 14px;
	}



	.data-detail-table-wrap{
		margin-top: 20px;
		font-size: 14px;
	}

	.block-title{
		position: relative!important;
	    font-size: 16px;
	    margin: 20px 0 15px;
	    padding-left: 10px;
	}

	.block-title:before{
		content: "";
	    position: absolute;
	    left: 0;
	    width: 3px;
	    height: 16px;
	    background: #ff8100;
	}

</style>